<template>
  <div class="store-list-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">商店列表</h1>
        <p class="page-subtitle">探索各种美食店铺，发现美味佳肴</p>
      </div>
    </div>

    <div class="search-filter-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索店铺名称..."
            clearable
            @keyup.enter.native="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-select v-model="sortBy" placeholder="排序方式" @change="handleSearch">
            <el-option label="默认排序" value="default"></el-option>
            <el-option label="评分最高" value="rating"></el-option>
            <el-option label="销量最高" value="sales"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="stores-section">
      <el-row :gutter="20" v-loading="loading">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="store in stores" :key="store.storeid">
          <el-card class="store-card" shadow="hover" @click.native="viewStoreDetail(store.storeid)">
            <div class="store-image">
              <img :src="store.storepicture || require('@/assets/shop-cover.jpg')" :alt="store.storename">
              <div class="store-overlay">
                <el-button type="primary" size="small">查看详情</el-button>
              </div>
            </div>
            <div class="store-info">
              <h3 class="store-name">{{ store.storename }}</h3>
              <p class="store-description">{{ store.storedescribe || '暂无描述' }}</p>
              <div class="store-meta">
                <span class="store-rating">
                  <i class="el-icon-star-on"></i>
                  {{ store.rating || '暂无评分' }}
                </span>
                <span class="store-sales">月售 {{ store.monthlysales || 0 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="no-stores" v-if="!loading && stores.length === 0">
        <div class="empty-state">
          <i class="el-icon-folder-opened empty-icon"></i>
          <p class="empty-text">暂无店铺信息</p>
          <p class="empty-subtext">请稍后再试或联系管理员</p>
        </div>
      </div>
    </div>

    <div class="pagination-wrapper" v-if="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { getAllStores } from '@/api/store'

export default {
  name: 'StoreList',
  data() {
    return {
      searchKeyword: '',
      sortBy: 'default',
      loading: false,
      stores: [],
      currentPage: 1,
      pageSize: 12,
      total: 0
    }
  },
  mounted() {
    this.loadStores()
  },
  methods: {
    async loadStores() {
      this.loading = true
      try {
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchKeyword,
          sortBy: this.sortBy
        }
        
        const response = await getAllStores(params)
        console.log('商店列表API响应:', response)
        
        if (response.data && response.data.code === 20000) {
          // 如果返回的是数组，直接使用
          if (Array.isArray(response.data.data)) {
            this.stores = response.data.data
            this.total = response.data.data.length
          } else {
            // 如果返回的是分页对象
            this.stores = response.data.data.list || []
            this.total = response.data.data.total || 0
          }
        } else {
          console.log('API返回错误，使用模拟数据')
          this.loadMockStores()
        }
      } catch (error) {
        console.error('加载店铺失败:', error)
        console.log('API调用失败，使用模拟数据')
        this.loadMockStores()
      } finally {
        this.loading = false
      }
    },

    loadMockStores() {
      // 模拟店铺数据
      this.stores = [
        {
          storeid: 1,
          storename: '川味小厨',
          storedescribe: '正宗川菜，麻辣鲜香',
          storepicture: 'https://shanfood.oss-cn-chengdu.aliyuncs.com/elema/upload/2025-06-29/e89fef7cf745431a81358d530abc4bf0.jpg',
          rating: 4.5,
          monthlysales: 1200
        },
        {
          storeid: 2,
          storename: '粤式茶餐厅',
          storedescribe: '港式茶点，精致美味',
          storepicture: 'https://shanfood.oss-cn-chengdu.aliyuncs.com/elema/upload/2025-06-29/e89fef7cf745431a81358d530abc4bf0.jpg',
          rating: 4.3,
          monthlysales: 800
        },
        {
          storeid: 3,
          storename: '东北饺子馆',
          storedescribe: '手工饺子，皮薄馅大',
          storepicture: 'https://shanfood.oss-cn-chengdu.aliyuncs.com/elema/upload/2025-06-29/e89fef7cf745431a81358d530abc4bf0.jpg',
          rating: 4.7,
          monthlysales: 1500
        },
        {
          storeid: 4,
          storename: '湘菜馆',
          storedescribe: '湖南特色，香辣可口',
          storepicture: 'https://shanfood.oss-cn-chengdu.aliyuncs.com/elema/upload/2025-06-29/e89fef7cf745431a81358d530abc4bf0.jpg',
          rating: 4.2,
          monthlysales: 900
        }
      ]
      this.total = this.stores.length
    },

    handleSearch() {
      this.currentPage = 1
      this.loadStores()
    },

    resetSearch() {
      this.searchKeyword = ''
      this.sortBy = 'default'
      this.currentPage = 1
      this.loadStores()
    },

    handlePageChange(page) {
      this.currentPage = page
      this.loadStores()
    },

    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.loadStores()
    },

    viewStoreDetail(storeId) {
      this.$router.push({
        path: `/store/detail/${storeId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.store-list-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .page-header {
    text-align: center;
    margin-bottom: 40px;
    
    .header-content {
      .page-title {
        font-size: 36px;
        color: #333;
        margin-bottom: 10px;
      }
      
      .page-subtitle {
        font-size: 18px;
        color: #666;
      }
    }
  }

  .search-filter-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stores-section {
    margin-bottom: 40px;

    .store-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        
        .store-overlay {
          opacity: 1;
        }
      }

      .store-image {
        position: relative;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
        margin-bottom: 15px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .store-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s;
        }
      }

      .store-info {
        .store-name {
          font-size: 18px;
          color: #333;
          margin: 0 0 10px 0;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .store-description {
          color: #666;
          font-size: 14px;
          margin: 0 0 15px 0;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .store-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;

          .store-rating {
            color: #f39c12;
            
            i {
              margin-right: 4px;
            }
          }

          .store-sales {
            color: #666;
          }
        }
      }
    }

    .no-stores {
      text-align: center;
      padding: 60px 20px;
      
      .empty-state {
        .empty-icon {
          font-size: 64px;
          color: #ddd;
          margin-bottom: 20px;
        }
        
        .empty-text {
          font-size: 18px;
          color: #666;
          margin-bottom: 10px;
        }
        
        .empty-subtext {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .pagination-wrapper {
    text-align: center;
    margin-top: 30px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .store-list-container {
    padding: 10px;
    
    .page-title {
      font-size: 28px !important;
    }
    
    .search-filter-section {
      .el-col {
        margin-bottom: 10px;
      }
    }
  }
}
</style> 